<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>购物车</title>
    <link rel="stylesheet" type="text/css" href="/css_z/base.css"/>
    <link rel="stylesheet" type="text/css" href="/css_z/shopcar.css"/>
    <link rel="stylesheet" type="text/css" href="/css_z/mui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css_z/loaders.min.css"/>
    <link rel="stylesheet" type="text/css" href="/css_z/loading.css"/>
    <link rel="stylesheet" type="text/css" href="/sourse_z/layer/mobile/need/layer.css">
    <script src="/js_z/rem.js"></script>
    <script src="/js_z/jquery.min.js" type="text/javascript"></script>
    <script src="/sourse_z/layer/mobile/layer.js"></script>
	<script src="/js/plugins/jrender/jrender.min.js"></script>
	<script src="/js/common.js"></script>
	<link rel="stylesheet" href="/js/plugins/dialog2/dialog.css"/>
	<script src="/js/plugins/dialog2/dialog.min.js"></script>
	<script type="text/javascript">
		$(window).load(function(){
			$(".loading").addClass("loader-chanage")
			$(".loading").fadeOut(300)
		})
		$(function () {
			//获取session中的shopCar
            var shopCar = JSON.parse(sessionStorage.getItem("shopCar"));
            var carArr=[];
            $.each(shopCar,function (index,value) {
                carArr.push(value)
            })
            console.log(carArr);
            $('#items').renderValues({list:carArr});

            //结算的时候没有选中不要跳转
			$('#jiesuan').click(function () {
                if ($("input[name='sex']:checked").length==0) {
                    $(document).dialog({
                        overlayClose: true,
                        content: '你都没有选,买个what???',
                    });
                }else {
                    //订单信息
					//拿到所有的 页面里的 商品
                    var orderItemsJs =  $('.orderItems')
					var orderItems = [] ;
                    var productId = ""
                    $.each(orderItemsJs,function (index,value) {
                        //如果是选中的商品
                        if ($(value).find("input[name='sex']:checked").length == 1) {
                            //拿出选出的商品 Id
                            var pid = $(value).find('.productId').data('pid')
							productId += index+ '='+ pid+'&'
                        }
                        console.log(productId);
                    })
					window.location.href = '/mine/shop/confirm.html?'+productId

				}
            });



            $('input[type="checkbox"]').click(function() { // 找到勾选按钮，绑定事件
                tatol();
            });

            $('.list ul img').click(function() { // 找到加减按钮，绑定点击事件
                var val = $(this).parent().parent().children().eq(1);
                //商品id
                var productId = $(this).data('pid');
                if ($(this).parent().index()) {
                    if (parseInt(val.html())<=1){
                        val.html(parseInt(val.html()) + 1);
                        $.ajax({
                            url:'/sessions/car/addItem',
                            data:{productId:productId,count:1},
                            method:'put',
                            success: function (data) {
                                // 将购物车放进session
                                sessionStorage.setItem("shopCar",JSON.stringify(data.resultTwo));
								// 取出session
                                shopCar = JSON.parse(sessionStorage.getItem("shopCar"));
                            }
                        });
                    } else {
                        $(document).dialog({
                            overlayClose: true,
                            content: '限购懂吗?',
                        });
                        $(this).closest('ul').find('.shuliang').attr('disabled','disabled');
                    }
                } else {
                    val.html(val.html() > 1 ? parseInt(val.html()) - 1 : 1);
                    $.ajax({
                        url:'/sessions/car/subProductCount',
                        data:{productId:productId},
                        method:'put',
                        success: function (data) {
                            // 将购物车放进session
                            sessionStorage.setItem("shopCar",JSON.stringify(data.resultTwo));
                            // 取出session
                            shopCar = JSON.parse(sessionStorage.getItem("shopCar"));
                        }
                    });
                }
                tatol();
            });

            $('.icon-lajixiang').click(function() { // 找到删除按钮，绑定点击事件
                var self = this;
                var productId = $(this).data('pid');
                layer.open({
                    content: '确定删除？',
                    btn: ['确定', '取消'],
                    yes: function(index) {
                        //删除指定id的商品
                        $.ajax({
                            url:'/sessions/car/deleteItem',
                            data:{productId:productId},
                            method:'put',
                            success: function (data) {
                                // 将购物车放进session
                                sessionStorage.setItem("shopCar",JSON.stringify(data.resultTwo));
                                // 取出session
                                shopCar = JSON.parse(sessionStorage.getItem("shopCar"));

                                $(self).parent().parent().parent().parent().remove();
                                layer.closeAll();
                                tatol();
                            }
                        });
                    }
                });

            });

            var tatol = function() { // 计算总积分
                var count = 0;
                $('.list').map(function(index, item) {
                    var $el = $(item);
                    if ($el.find('input[type="checkbox"]').is(":checked")) {
                        count += parseFloat($el.find('.jifen').html()) * parseInt($el.find('.zuo li').eq(1).html());
                    }
                });
                if (count > 0) {
                    $('.settlement span').html(count + '积分');
                }
                if ($("input[name='sex']:checked").length==0) {
                    $('.settlement span').html('0积分');
                }
            }
        });
	</script>
</head>
<!--loading页开始-->
<div class="loading">
	<div class="loader">
        <div class="loader-inner pacman">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
	</div>
</div>
<!--loading页结束-->
	<body>
		<!--header star-->
		<header class="mui-bar mui-bar-nav" id="header">
			<a class="btn" href="javascript:history.go(-1)">
	            <i class="iconfont icon-fanhui"></i>
	        </a>
	        <h4>购物车</h4>
	    </header>
	    <!--header end-->
	    
	    <div class="warp warptwo clearfloat" id="items">
	    	<div class="shopcar clearfloat"  render-loop="list">
	    		<div class="list clearfloat fl orderItems" >
					<!--复选框-->
					<div class="xuan clearfloat fl">
						<div class="radio" >
							<label>
								<input type="checkbox" class="checkclass" name="sex" value="" />

							</label>
						</div>
					</div>
					<a href="javascript:void(0)">
						<div class="tu clearfloat fl">
							<span></span>
							<img render-src="list.productPic" width="60px"/>
						</div>
						<div class="right clearfloat fl">
							<p hidden render-html="list.productId"></p>
							<p class="tit over" render-html="list.productName" ></p>
							<p class="fu-tit over" >颜色：蓝色  内存：120G</p>
							<p class="jifen over" render-html="list.productPrice"></p>
							<div class="bottom clearfloat">
								<div class="zuo clearfloat fl">
									<ul>
										<li class="minus" ><img src="/img/icon/jian.jpg" class="productId"  render-attr="data-pid=list.productId"/></li>
										<li class="shuliang" render-html="list.number">1</li>
										<li class="add" ><img src="/img/icon/jia.jpg" render-attr="data-pid=list.productId"/></li>
									</ul>
								</div>
								<i class="iconfont icon-lajixiang fr" render-attr="data-pid=list.productId"></i>
							</div>
						</div>
					</a>
				</div>
	    	</div>
	    </div>

	    <!--settlement star-->
	    <div class="settlement clearfloat">
	    	<div class="zuo clearfloat fl box-s">
	    		合计：<span>0积分</span>
	    	</div>
			<!--没有选中的时候不要跳转-->
	    	<a href="#" class="fl db" id="jiesuan">
	    		立即结算
	    	</a>
	    </div>
	    <!--settlement end-->
	    
		<!--footer star-->
	    <footer class="page-footer fixed-footer" id="footer">
			<ul>
				<li>
					<a href="index.html">
						<i class="iconfont icon-shouye"></i>
						<p>首页</p>
					</a>
				</li>
				<li>
					<a href="cation.html">
						<i class="iconfont icon-icon04"></i>
						<p>分类</p>
					</a>
				</li>
				<li class="active">
					<a href="shopcar.html">
						<i class="iconfont icon-gouwuche"></i>
						<p>购物车</p>
					</a>
				</li>
				<li>
					<a href="center.html">
						<i class="iconfont icon-yonghuming"></i>
						<p>我的</p>
					</a>
				</li>
			</ul>
		</footer>
		<!--footer end-->

		<script type="text/javascript">
			$(function () {

            });
		</script>
		
	</body>

</html>
